<template>
	<s-layout navbar="custom1" title="鲸囍供应链" :bgStyle="{ color: '#f5f5f5' }">
		<view class="content">
			<view class="topBg">
				<!-- 顶部渐变背景色 -->
			</view>
			<!-- 自定义navbar -->
			<assNavbar title="鲸囍供应链" :background="{ BGcolor: BGcolor, img: 'none' }">
			</assNavbar>
			<!-- <uv-sticky :offset-top="44 + statusBarHeight" :bgColor="navbarColor"> -->
			<su-sticky :bgColor="BGcolor">
				<!-- 搜索框 -->
				<view class="searchBox">
					<uni-search-bar @confirm="searchFn" bgColor="#fff" class="u-search" placeholder="输入商品名称查询"
						v-model="searchTText"></uni-search-bar>
				</view>
				<!-- 商品分类 -->
				<view style="background-color: transparent;margin-top:40rpx;">
					<su-tabs :list="typedata" lineColor="#f9782c" @change="cheangeshop">
						<template #right>
							<uni-icons type="list" size="20" style="padding:0  20rpx;z-index:1"></uni-icons>
						</template>
					</su-tabs>
				</view>
				<!-- 功能菜单 -->
				<view class="swiperBox">
					<swiper class="swiper" style="height:120rpx" :indicator-dots="false" :duration="300"
						@change="swiperChange">
						<swiper-item class="swiper-item" v-for="i in Math.ceil(menuListFilterate.length / 5)" :key="i">
							<view class="flex fww " style="width: 750rpx;">
								<view class="list-sty-item"
									v-for="item in menuListFilterate.slice((i - 1) * 5, 5 * (i))" :key="item.title"
									@click="navigator(item)">
									<view class="list-sty-item-bg flex-fdc-aic-jcc">
										<image class="icons-img" :src="item.img">
										</image>
										<view class="text">{{ item.title }}</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="progress" :style="{ width: (Math.ceil(menuListFilterate.length / 5) * 35) + 'rpx' }">
						<view class="progress-slider" :style="'transform: translateX(' + translateX + 'rpx);'">
						</view>
					</view>
				</view>
			</su-sticky>
			<!-- 供应链&团长入口 -->
			<view class="supplyBox flex-aic-jcsb">
				<view class="supplyBox flex-aic-jcsb">
					<view class="supplyBox-item" v-for="(obj, index) in supplyBtnList" :key="index"
						:style="{ backgroundImage: 'url(' + obj.img + ')' }" @click="checkobj(obj, index)">
						<!-- <image class="sectorImg" :src="sheep.$url.cdn('/static/sector.png')"></image>
					<image class="starImg" :src="obj.img"></image>
					<view class="itemInfo">
						<view class="itemInfo-item-title">
							{{obj.title}}
						</view>
						<view class="itemInfo-item-tips">
							{{obj.tips}}
						</view>
						<button type="default">{{obj.name}}</button>
					</view> -->
					</view>
				</view>
			</view>
			<!-- 活动卡片组件 -->
			<activityBox @activityTap='navigatorss' :activityData="activityData" :posterData="posterData"
				@posterTap='navigatorss'>
			</activityBox>
			<su-sticky :bgColor="BGcolor" offsetTop="162">
				<dropdown-screen :listArr="listArr" :itemArr="taskClass" @finish="getVal"
					:isNeedChangeTitle="false"></dropdown-screen>
			</su-sticky>


			<!-- 商品列表 -->
			<view class="listBox flex-aic-jcsb fww">
				<view class="listBox-item" v-for="(item, i) in pagination.data" :key='i'>
					<image class="listBox-item-goods-img" mode="aspectFill" :src="sheep.$url.cdn(item.image)"
						@click="shopdetail(item)"></image>

					<image v-if="item.type == 2" class="benimg" :src="benimg" mode="aspectFill"></image>
					<view class="item-title flex-aic">
						<view>
							{{ item.title }}
						</view>
					</view>
					<view class="item-bounty flex-aic-jcsb">
						<view style="color: #b69767;">
							<text>￥{{ item.price[0] }}</text>
						</view>
					</view>
					<!-- todo -->
					<view class="item-bounty flex-aic-jcsb">
						<view class="brokerage">
							佣金<text>￥{{ parseFloat(item.price[0] * item.commission_money_rate / 100).toFixed(2)
								}}</text>
						</view>
						<view class="ratio ss-flex  align-center">
							<view class="label">佣金比例</view>
							<view class="valuye">
								{{ item.commission_money_rate }}%
							</view>
						</view>
					</view>
					<view class="item-btnBox flex-aic-jcsb">
						<button class="defaults" type="default" disabled v-if="item.is_join == 1">已加入店铺</button>
						<button class="showcase" type="default" v-if="item.is_join == 0"
							@click="addShop(item, i)">一键铺货</button>
						<!-- <button class="release" :class="{'release-no':!item.jobinfo.job_id}" type="default"
							@click="shopdetail(item.id,item.job.id)">{{item.is_publish_video?'已发布视频':'发布视频'}}</button> -->
					</view>
				</view>
			</view>
			<!-- 列表加载状态 -->
			<uni-load-more :status="status"></uni-load-more>
			<view style="height: 10rpx;">
				<!-- 占位 -->
			</view>


		</view>
	</s-layout>
</template>




<script>
import dropdownScreen from './components/dropdown-screen/dropdown-screen.vue';
import activityBox from './components/activityBox/activityBox.vue';
import assNavbar from '@/components/ass-navbar.vue';
import sheep from '@/sheep/index.js';
import _ from "lodash"
export default {
	components: {
		dropdownScreen,
		activityBox,
		assNavbar,

	},
	data() {
		return {
			sheep,
			BGcolor: 'transparent',
			examineShow: false,
			examineTitle: '',
			examineContent: '',
			carvalue: 0,
			shopState: '',
			show: false,
			title: '提示',
			content: '',
			// 自定义navbar颜色
			navbarColor: 'rgba(255,255,255,0)',
			// 列表加载状态
			status: '',
			// 犇犇精选图标
			benimg: sheep.$url.cdn('/static/supply/benbenjx.png'),
			// 每页最大值
			limit: 10,
			// 当前页
			page: 1,
			// 功能栏翻页滑块位移量
			translateX: 0,
			sales: "",
			commission_money_rate: "",
			create_time: "",
			views: "",
			// 搜索词
			search: '',
			searchTText: '',
			// 分类筛选栏分类
			listArr: ['销量', '佣金', '上架时间', '浏览量'],
			// 分类筛选栏分类数据
			taskClass: [
				[
					{
						text: '全部',
						value: ""
					},
					{
						text: '从高到低',
						value: 'desc'
					},
					{
						text: '从低到高',
						value: 'asc'
					},
				],
				[
					{
						text: '全部',
						value: ""
					},
					{
						text: '升序',
						value: 'asc'
					},
					{
						text: '降序',
						value: 'desc'
					},
				],
				[
					{
						text: '全部',
						value: ""
					},
					{
						text: '最早上架',
						value: 'desc'
					},
					{
						text: '最新上架',
						value: 'asc'
					},
				],
				[
					{
						text: '全部',
						value: ""
					},
					{
						text: '从高到低',
						value: 'desc'
					},
					{
						text: '从低到高',
						value: 'asc'
					},
				],

			],
			// 活动海报数据
			posterData: [],
			// 活动数据
			activityData: [],
			// 商品分类数据
			typedata: [{ id: null, name: "全部", parent_id: -1, status: "normal", weigh: 0 }],
			// 商品列列表数据
			cardList: [],
			supplyBtnList: [
			],
			// 功能栏数据
			functionMenuList: [



			],
			// 状态栏高度
			statusBarHeight: 20,
			swiperList: [],
			// 当前选中分类
			category_id: null,
			pagination: {
				data: [],
				current_page: 1,
				total: 1,
				last_page: 1,
			},
			shopid: null,
			sortIndex: 0,
			sortData: {
				sort: "",
				order: ""
			}
		}
	},
	onLoad(e) {
		if (e.shopid) {
			this.shopid = e.shopid
		}
		else {
			this.shopid = JSON.parse(uni.getStorageSync('user-store')).userInfo.cyq_store_id
		}
		// 获取状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		// 获取分类数据
		this.getClassList();
		// 获取商品数据
		this.getShopList();
		// 获取静态资源
		this.getStaticImages()

	},
	onUnload() {

	},
	onShow() {
		// 获取商品数据
		// this.getShopList();
	},
	onPageScroll(e) {

		if (e.scrollTop > 30) {
			this.BGcolor = '#fff';
		} else {
			this.BGcolor = 'transparent';
		}

		// 监听滚动使navbar背景色渐变
		this.navbarColor = `rgba(255,255,255,${e.scrollTop <= 50 ? e.scrollTop / 50 : 1})`
	},
	onReachBottom() {
		this.loadmore()
	},
	onPullDownRefresh() {
		this.loadmore()
	},
	methods: {
		// 获取资源位数据
		async getStaticImages() {
			const res = await sheep.$api.store.getStoreImages()
			console.log(res, 'res');
			this.posterData = res.data.banner
			this.activityData.push(res.data.banner[1])
			this.activityData.push(res.data.banner[2])
			this.functionMenuList = res.data.icon
			this.supplyBtnList.push(res.data.banner[4])
			this.supplyBtnList.push(res.data.banner[3])

		},
		async addShop(item, i) {
			if (this.shopid == null || this.shopid == 0) {
				uni.showModal({
					title: '提示',
					content: '未开通权限，请先入驻商家',
					confirmText: '去申请',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/store/index',

							})
						}
					}
				})
			}
			else {
				if (item.is_join == 0) {
					const data = {
						id: item.id,
						store_ids: this.shopid
					}
					const { error, data1 } = await sheep.$api.store.addStoreGoods(data)
					if (error == 0) {
						uni.showToast({
							title: '加入成功'
						})
						this.pagination.data[i].is_join = 1
					}
					else {
						uni.showToast({
							title: data1
						})
					}
				}
				else {
					uni.showToast({
						title: '已加入，不能重复加入',
						icon: 'none'
					})

				}
			}

		},
		loadmore() {

			if (this.status !== 'noMore') {
				this.pagination.current_page = this.pagination.current_page + 1
				this.getShopList(this.pagination.current_page + 1);
			}
		},

		commissionRate() {
			return _.random(20, 50);
		},
		commission() {
			return _.random(1, 20);
		},

		// 获取用户身份卡片
		toExamine() {
			this.examineShow = false
			uni.navigateTo({
				url: '/pages/live/supply/addTaskCard',
				complete: () => {
					setTimeout(() => {
						// uni.$u.toast('入驻电商达人')
					}, 50)
				}
			})
		},
		navigatorss(e) {
			console.log(e);

			if (e.url == '') {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			}
			else {
				uni.navigateTo({
					url: e.url
				})
			}
			// var banner_sort = e==2?'high_commission':(e==1?'total_sale':'price');
			// var type = e==0?3:4;
			// uni.navigateTo({
			// 	url: `/pages/task/supply/screen?type=${type}&screen=${e}&banner_sort=${banner_sort}`
			// })
		},
		confirm() {
			let url
			if (this.shopState == -1) {
				url = `/pages/reindex/my_doudian?type=${1}`
			} else if (this.shopState == -2) {
				url = `/pages/live/supply/supplychain?type=3`
			}
			uni.navigateTo({
				url
			})
			this.show = false
		},
		cancel() {
			this.show = false;
		},
		//查询
		searchFn(val) {
			this.search = val.value;
			this.pagination = {
				data: [],
				current_page: 1,
				total: 1,
				last_page: 1,
			}
			this.status = '';

			this.getShopList();

		},
		// 切换商品怕分类
		cheangeshop(data) {
			console.log(data);

			this.search = '';
			this.category_id = data.id;
			this.status = '';
			this.pagination = {
				data: [],
				current_page: 0,
				total: 1,
				last_page: 1,
			}

			this.loadmore();

		},
		// 获取全部数据
		async getShopList(page = 1, list_rows = 5) {
			let that = this
			that.status = 'loading'
			that.show_load = true

			let data = {
				title: this.search,
				category_id: this.category_id,
				list_rows: that.limit,
				page: that.pagination.current_page++,
				is_cloud: 1,
				is_selected: 1,
				sort: this.sortData.sort,
				order: this.sortData.order
			}

			const res = await sheep.$api.store.getStoreGoods(data);

			if (res.error == 0) {

				let arr = res.data.data;

				arr = arr.map((item, index) => {
					return { ...item, ...{ is_put_product: 1, is_put_cart: 0 }, ...{ jobinfo: { job_id: 1 } } };
				})

				let list = _.concat(this.pagination.data, arr);

				this.pagination = {
					...res.data,
					//   current_page:res.data.current_page+1,
					data: list,
				};
				console.log(this.pagination, 'pagination');

				if (this.pagination.current_page < this.pagination.last_page) {
					this.status = 'more';
				} else {
					this.status = 'noMore';
				}

			} else {
				this.status = 'noMore'

				uni.stopPullDownRefresh()
			}
		},
		// 获取分类
		async getClassList() {


			const res = await sheep.$api.store.getStoreCategory()
			console.log(res);

			if (res.error == 0) {
				this.typedata.push(...res.data.children);

			}

		},
		//获取详情
		shopdetail(item) {
			let self = this
			uni.navigateTo({
				url: `/pages/goods/index?id=${item.id}&types=1&is_join=${item.is_join}&shopid=${this.shopid}`,
				events: {
					// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					changeStoreStatus: function (data) {
						console.log(data)
						self.pagination.data = self.pagination.data.map(item => {
							if (item.id === data) {
								item.is_join = 1
							}
							return item
						})
					},
				},
			})
		},
		togodouyin(link) {
			uni.setClipboardData({
				data: link,
				showToast: false,
				success: () => {
					uni.$u.toast('复制到抖音!');
				},
				fail(err) {
					uni.showModal({
						title: '提示',
						content: err.message,
						showCancel: false,
					})
				}
			});
		},
		// 功能栏点击跳转
		navigator(item) {
			if (item.url !== '') {
				uni.navigateTo({
					url: item.url
				})
			} else {
				uni.showToast({
					title: '暂未开放！敬请期待！',
					icon: 'none'
				})
			}
		},
		// 点击供应商&团队长卡卡片
		checkobj(obj, i) {
			console.log(obj);

			if (i == 1) {
				uni.navigateTo({
					url: `/pages/store/index`
				})
			}
			else {
				uni.showToast({
					title: '暂未开放！敬请期待！',
					icon: 'none'
				})
			}

		},
		// 分类筛选点击事件回调
		getVal(e) {
			this.sortData.sort = ''
			this.sortData.order = ''
			if (e.$index == 0) {
				this.sortData.sort = 'sales'
				this.sortData.order = e.value
			} else if (e.$index == 1) {
				this.sortData.sort = 'commission_money_rate'
				this.sortData.order = e.value
			} else if (e.$index == 2) {
				this.sortData.sort = 'create_time'
				this.sortData.order = e.value
			} else if (e.$index == 3) {
				this.sortData.sort = 'views'
				this.sortData.order = e.value
			}

			this.dataList = []
			this.page = 0;
			this.status = '';
			this.pagination = {
				data: [],
				current_page: 1,
				total: 1,
				last_page: 1,
			}
			this.getShopList(1);
		},
		// 切换功能栏滑块移动
		swiperChange(e) {
			this.translateX = (35 / (Math.ceil(this.menuListFilterate.length / 5) - 1)) * e.detail.current
		},

	},
	computed: {
		// ios 过滤无用功能
		menuListFilterate() {
			let arr = this.functionMenuList.filter(item => {
				return item
			})
			return arr
		}
	},
}
</script>

<style>
page {
	background-color: #fafafa;
}
</style>
<style lang="scss" scoped>
view {
	box-sizing: border-box;
}

.content {
	position: relative;

	.topBg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-image: linear-gradient(rgba(249, 239, 225, 0.5), #fafafa);
		height: 320rpx;
	}

	.searchBox {
		padding: 10rpx 0;
		position: relative;
		height: 60rpx;

		.u-search {
			position: absolute;
			top: 0;
			left: 50%;
			z-index: 10;
			width: 720rpx;
			border-radius: 40rpx;
			// box-shadow: 0 4rpx 6rpx 4rpx rgba(150, 150, 150, 0.1);
			transform: translateX(-50%);
		}
	}

	.swiperBox {
		padding: 15rpx 0;

		.swiper-item {

			.list-sty-item {
				height: 120rpx;
				width: 150rpx;

				.list-sty-item-bg {
					margin: 0 auto;
					width: 150rpx;
					height: 120rpx;

					.text {
						font-size: 24rpx;
						font-weight: 400;
						color: #1d1d1f;
						margin-top: 10rpx;
					}

				}

			}
		}

		.progress {
			margin: 10rpx auto;
			height: 8rpx;
			border-radius: 4rpx;
			background-color: #B6B6B8;

			&-slider {
				background-color: #f9782c;
				width: 35rpx;
				height: 8rpx;
				border-radius: 4rpx;
				transition: 0.2s;
			}
		}
	}

	.posiStick {
		position: sticky;
		top: 600rpx;
		left: 0;
	}

	.flex-aic-jcsb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fww {
		flex-wrap: wrap;
	}

	.supplyBox {
		// margin-left:10rpx;
		// margin-right:10rpx;
		// padding: 10rpx 25rpx 20rpx;

		width: 100%;
    margin: 0rpx auto 10rpx;
    padding: 0 10rpx;

		.supplyBox-item {
			box-shadow: 0rpx 2rpx 30rpx 0rpx rgba(60, 60, 60, 0.05);
			position: relative;
			overflow: hidden;
			border-radius: 15rpx;
			background-color: #fff;
			padding: 10rpx 15rpx;
			height: 150rpx;
			width: 351rpx;
			background-size: 100% 100%;

			.sectorImg {
				z-index: 0;
				position: absolute;
				left: 0;
				top: 0;
				height: 140rpx;
				width: 140rpx;
			}

			.starImg {
				opacity: .2;
				position: absolute;
				z-index: 0;
				right: -30rpx;
				bottom: -30rpx;
				height: 160rpx;
				width: 160rpx;
			}

			.itemInfo {
				position: absolute;
				z-index: 5;

				.itemInfo-item-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
				}

				.itemInfo-item-tips {
					font-size: 22rpx;
					color: #aaa;
					width: 70%;
				}

				button {
					height: 32rpx;
					width: 120rpx;
					color: #fff;
					line-height: 32rpx;
					padding: 0 !important;
					text-align: center;
					margin: 0 !important;
					background-color: #ffb05b;
					font-size: 24rpx;
				}
			}
		}
	}


	.listBox {
		padding: 20rpx 15rpx 0;


		.listBox-item {
			position: relative;
			border-radius: 15rpx;
			overflow: hidden;
			background-color: #fff;
			width: 356rpx;
			margin-bottom: 20rpx;
			box-shadow: 0rpx 2rpx 30rpx 0rpx rgba(110, 110, 110, 0.1);

			.listBox-item-goods-img {
				width: 100%;

			}

			.benimg {
				height: 70rpx;
				width: 80rpx;
				position: absolute;
				top: 5rpx;
				right: 5rpx;
				z-index: 1;
			}

			.item-title {
				padding: 10rpx 10rpx 0;
				font-size: 28rpx;
				height: 80rpx;

				&>view {
					width: 340rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					//将对象作为弹性伸缩盒子模型显示。
					display: -webkit-box;
					// 从上到下垂直排列子元素
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}


			.item-bounty {
				padding: 0 10rpx;
				margin: 10rpx 0 10rpx;

				.brokerage {
					color: #FA8B23;
					font-size: 22rpx;

					text {
						font-size: 26rpx;
					}
				}

				.ratio {
					font-size: 20rpx;
					background-color: #3d3d3d;
					height: 28rpx;
					text-align: center;
					color: #F4E7DA;
					line-height: 28rpx;
					padding-left: 5rpx;

					.valuye {
						height: 28rpx;
						line-height: 28rpx;
						color: #3D3D3D;
						background-color: #f4e7da;
						padding: 0 10rpx;

					}

					.label {
						margin-right: 5rpx;
					}
				}
			}

			.item-btnBox {
				padding: 0 10rpx 10rpx;

				button {
					// width: 150rpx;
					width:100%;
					text-align: center;
					line-height: 26rpx;
					font-size: 26rpx;
					padding: 10rpx 0 !important;
					margin: 0 !important;
				}

				.showcase {
					background-color: #dbe8fe;
					color: #3E86FD;
				}

				.defaults {
					background-color: #B6B6B8 !important;
					color: #000;
					opacity: 0.4;
				}

				.release {
					background-color: #fbefe3;
					color: #FD7E08;
				}

				.release-no {
					background-color: #B6B6B8 !important;
					color: #000;
					opacity: 0.4;
				}
			}
		}
	}


	.suspension-item {
		position: fixed;
		right: 50rpx;
		bottom: 100rpx;
		z-index: 10;
		margin-top: 20rpx;
		transition: 0.3s;
		width: 80rpx;
		height: 80rpx;

		.bg {
			z-index: 10;
			width: 80rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: rgba(153, 153, 153, 0.8);
			border-radius: 50%;
			transition: 0.3s;
		}

		.badge {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			z-index: 10;
			// transform: translateX(-50%);
		}

		.four {
			z-index: 10;
			width: 80rpx;
			height: 80rpx;
			background-color: rgba(153, 153, 153, 0.8);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.image {
				width: 65rpx;
				height: 65rpx;
				transition: 0.3s;
			}

			.image2 {
				width: 50rpx;
				height: 50rpx;
				transition: 0.3s;
				transform: rotate(45deg);
			}
		}

	}
}

.flex {
	display: flex;
}

.flex-fdc-aic-jcc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.icons-img {
	width: 74rpx;
	height: 74rpx;
}
</style>